<template>
    <view class="content">
		<image src="../../static/image/bg_2.png" class="bg-2"></image>
		<u-navbar :is-back="true" back-icon-color="#fff" :border-bottom="false" title="任务系统" title-color="#fff"
			:background="background" :immersive="true"></u-navbar>
		
        <view class="wrapper" :style="{paddingTop: statusBar + 70 + 'px'}">
			<view class="info">
				<view>
					<view>我的金币</view>
					<view class="u-flex">
						<image src="../../static/image/img_4.png" class="img-4"></image>
						<view class="num">3680</view>
					</view>
				</view>
				<view class="p-btn" @click="$gTo(`./list`)">积分明细</view>
			</view>
			<view class="rule">
				<image src="../../static/icon/tip_2.png" class="tip-2"></image>
				<view>积分说明：内容展示内容展示内容展示内容展示内容展示</view>
			</view>
			<view class="box">
				<image src="../../static/image/img_6.png" class="img-6"></image>
				<image src="../../static/image/img_7.png" class="img-6"></image>
			</view>
			
			<view class="item" v-for="(item, index) in 3" :key="index">
				<view class="u-flex-1">
					<view class="title">标题内容</view>
					<view class="sub">”累计”“签到”“1”天，可获得“10” 积分</view>
				</view>
				<view class="item-r">
					<view class="i-num">
						10<text class="u-font-24">/20</text>
					</view>
					<view class="i-btn">领取</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: {
                    backgroundColor: 'rgba(255,255,255,0)',
                },
                statusBar: 0,
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
                success: function(res) {
                    _this.statusBar = res.statusBarHeight;
                }
            });
            
        },
        methods: {
    		
            // 滚动监听
            onPageScroll: function(e) {
                //nvue暂不支持滚动监听，可用bindingx代替
                // console.log("滚动距离为：" + e.scrollTop);
                let a = e.scrollTop * 0.05;
                if (a > 1) {
                    a = 1;
                }
                if (e.scrollTop == 0) {
                    this.background.backgroundColor = 'rgba(178,209,254,0)';
                } else {
                    this.background.backgroundColor = 'rgba(178,209,254,' + a + ')';
                }
            },
        }
    };
</script>

<style lang="scss">
	
    page{
		background: linear-gradient(to bottom,#bfd0ea,#f3f7fe);
    }
	.bg-2{
		width: 750rpx;
		height: 355rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.wrapper{
		padding: 0 30rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #2f4e81;
	}
	.img-4{
		width: 53rpx;
		height: 53rpx;
		margin-right: 15rpx;
	}
	.num{
		font-size: 74rpx;
	}
	.p-btn{
		font-size: 24rpx;
		color: #fff;
		padding: 14rpx 26rpx;
		background: rgba(22, 65, 143, .5);
		border-radius: 15rpx;
	}
	.rule{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 0;
	}
	.tip-2{
		width: 31rpx;
		height: 31rpx;
		margin-right: 10rpx;
	}
	.rule>view{
		font-size: 24rpx;
		color: #2f4e81;
		flex: 1;
		word-break: break-all;
		white-space: pre-line;
	}
	.box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 46rpx 40rpx;
		background: linear-gradient(to bottom,#e4ecfb,#f7f9fe,#fff);
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}
	.img-6{
		width: 296rpx;
		height: 165rpx;
	}
	
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 35rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.title{
		font-size: 28rpx;
		font-weight: bold;
	}
	.sub{
		font-size: 24rpx;
		color: #7a7979;
		padding-top: 14rpx;
	}
	.item-r{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		padding-left: 20rpx;
	}
	.i-num{
		font-size: 38rpx;
		font-weight: bold;
		color: #fa6606;
	}
	.i-btn{
		font-size: 26rpx;
		color: #fff;
		padding: 8rpx 30rpx;
		background: linear-gradient(to right,#00a3f9,#007af4);
		border-radius: 15rpx;
	}
	
	

</style>
